<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - NgModule FAQ</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-guide mode-stable page-guide-ngmodule-faq sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.wangke.io/" title="译者汪志成的博客，包括翻译文章和原创文章" target="_blank"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">译者博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版" target="_self"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="false"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="Angular 的基本原理" aria-pressed="true"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 expanded selected ng-star-inserted" title="Angular 中的模块" aria-pressed="true"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供者与 NgModule" target="_self"><span>服务提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 expanded selected ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供者类型的更多知识。" target="_self"><span>DI 提供者</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://devui.design/" title="“华为云” 开源的企业级组件库，核心设计思想是：致简、沉浸、灵活" target="_blank"><span>华为 DevUI 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="guide-ngmodule-faq"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/ngmodule-faq.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="ngmodule-faq">NgModule FAQ<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#ngmodule-faq"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="我应该把哪些类加到 declarations 中？"><a href="guide/ngmodule-faq#what-classes-should-i-add-to-the-declarations-array">我应该把哪些类加到 <em>declarations</em> 中？</a></li><li class="h2 ng-star-inserted" title="什么是可声明的？"><a href="guide/ngmodule-faq#what-is-a-declarable">什么是<em>可声明的</em>？</a></li><li class="h2 ng-star-inserted" title="哪些类不应该加到 declarations 中？"><a href="guide/ngmodule-faq#what-classes-should-i-not-add-to-declarations">哪些类<em>不</em>应该加到 <code>declarations</code> 中？</a></li><li class="h2 secondary ng-star-inserted" title="为什么要把同一个组件声明在不同的 NgModule 属性中？"><a href="guide/ngmodule-faq#why-list-the-same-component-in-multiple-ngmodule-properties">为什么要把同一个组件声明在不同的 <em>NgModule</em> 属性中？</a></li><li class="h2 secondary ng-star-inserted" title="&quot;Can't bind to 'x' since it isn't a known property of 'y'&quot;是什么意思？"><a href="guide/ngmodule-faq#what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean">"<em>Can't bind to 'x' since it isn't a known property of 'y'</em>"是什么意思？</a></li><li class="h2 secondary ng-star-inserted" title="我应该导入什么？"><a href="guide/ngmodule-faq#what-should-i-import">我应该导入什么？</a></li><li class="h2 secondary ng-star-inserted" title="我应该导入 BrowserModule 还是 CommonModule？"><a href="guide/ngmodule-faq#should-i-import-browsermodule-or-commonmodule">我应该导入 <em>BrowserModule</em> 还是 <em>CommonModule</em>？</a></li><li class="h2 secondary ng-star-inserted" title="如果我两次导入同一个模块会怎么样？"><a href="guide/ngmodule-faq#what-if-i-import-the-same-module-twice">如果我两次导入同一个模块会怎么样？</a></li><li class="h2 secondary ng-star-inserted" title="我应该导出什么？"><a href="guide/ngmodule-faq#what-should-i-export">我应该导出什么？</a></li><li class="h2 secondary ng-star-inserted" title="我不应该导出什么？"><a href="guide/ngmodule-faq#what-should-i-not-export">我<em>不应该</em>导出什么？</a></li><li class="h2 secondary ng-star-inserted" title="我可以重新导出类和模块吗？"><a href="guide/ngmodule-faq#can-i-re-export-classes-and-modules">我可以重新导出类和模块吗？</a></li><li class="h2 secondary ng-star-inserted" title="forRoot()方法是什么？"><a href="guide/ngmodule-faq#what-is-the-forroot-method"><em>forRoot()</em>方法是什么？</a></li><li class="h2 secondary ng-star-inserted" title="为什么服务提供者在特性模块中的任何地方都是可见的？"><a href="guide/ngmodule-faq#why-is-a-service-provided-in-a-feature-module-visible-everywhere">为什么服务提供者在特性模块中的任何地方都是可见的？</a></li><li class="h2 secondary ng-star-inserted" title="为什么在惰性加载模块中声明的服务提供者只对该模块自身可见？"><a href="guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module">为什么在惰性加载模块中声明的服务提供者只对该模块自身可见？</a></li><li class="h2 secondary ng-star-inserted" title="如果两个模块提供了同一个服务会怎么样？"><a href="guide/ngmodule-faq#what-if-two-modules-provide-the-same-service">如果两个模块提供了<em>同一个</em>服务会怎么样？</a></li><li class="h2 secondary ng-star-inserted" title="我应该如何把服务的范围限制到模块中？"><a href="guide/ngmodule-faq#how-do-i-restrict-service-scope-to-a-module">我应该如何把服务的范围限制到模块中？</a></li><li class="h2 secondary ng-star-inserted" title="我应该把全应用级提供者添加到根模块 AppModule 中还是根组件 AppComponent 中？"><a href="guide/ngmodule-faq#should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent">我应该把全应用级提供者添加到根模块 <code>AppModule</code> 中还是根组件 <code>AppComponent</code> 中？</a></li><li class="h2 secondary ng-star-inserted" title="我应该把其它提供者注册到模块中还是组件中？"><a href="guide/ngmodule-faq#should-i-add-other-providers-to-a-module-or-a-component">我应该把其它提供者注册到模块中还是组件中？</a></li><li class="h2 secondary ng-star-inserted" title="为什么在共享模块中为惰性加载模块提供服务是个馊主意？"><a href="guide/ngmodule-faq#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module">为什么在共享模块中为惰性加载模块提供服务是个馊主意？</a></li><li class="h3 secondary ng-star-inserted" title="急性加载的场景"><a href="guide/ngmodule-faq#the-eagerly-loaded-scenario">急性加载的场景</a></li><li class="h3 secondary ng-star-inserted" title="惰性加载场景"><a href="guide/ngmodule-faq#the-lazy-loaded-scenario">惰性加载场景</a></li><li class="h2 secondary ng-star-inserted" title="为什么惰性加载模块会创建一个子注入器？"><a href="guide/ngmodule-faq#why-does-lazy-loading-create-a-child-injector">为什么惰性加载模块会创建一个子注入器？</a></li><li class="h2 secondary ng-star-inserted" title="我要如何知道一个模块或服务是否已经加载过了？"><a href="guide/ngmodule-faq#how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded">我要如何知道一个模块或服务是否已经加载过了？</a></li><li class="h2 secondary ng-star-inserted" title="什么是入口组件？"><a href="guide/ngmodule-faq#what-is-an-entry-component">什么是<em>入口组件</em>？</a></li><li class="h2 secondary ng-star-inserted" title="引导组件和入口组件有什么不同？"><a href="guide/ngmodule-faq#whats-the-difference-between-a-bootstrap-component-and-an-entry-component"><em>引导组件</em>和<em>入口组件</em>有什么不同？</a></li><li class="h2 secondary ng-star-inserted" title="什么时候我应该把组件加到 entryComponents 中？"><a href="guide/ngmodule-faq#when-do-i-add-components-to-entrycomponents">什么时候我应该把组件加到 <code>entryComponents</code> 中？</a></li><li class="h2 secondary ng-star-inserted" title="为什么 Angular 需要入口组件？"><a href="guide/ngmodule-faq#why-does-angular-need-entrycomponents">为什么 Angular 需要<em>入口组件</em>？</a></li><li class="h2 secondary ng-star-inserted" title="有哪些类型的模块？我应该如何使用它们？"><a href="guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them">有哪些类型的模块？我应该如何使用它们？</a></li><li class="h3 secondary ng-star-inserted" title="SharedModule"><a href="guide/ngmodule-faq#sharedmodule"><code>SharedModule</code></a></li><li class="h3 secondary ng-star-inserted" title="特性模块"><a href="guide/ngmodule-faq#feature-modules">特性模块</a></li><li class="h2 secondary ng-star-inserted" title="在 NgModule 和 JavaScript 模块之间有什么不同？"><a href="guide/ngmodule-faq#whats-the-difference-between-ngmodules-and-javascript-modules">在 NgModule 和 JavaScript 模块之间有什么不同？</a></li><li class="h2 secondary ng-star-inserted" title="Angular 如何查找模板中的组件、指令和管道？什么是 模板引用 ？"><a href="guide/ngmodule-faq#how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference">Angular 如何查找模板中的组件、指令和管道？什么是 <strong><em>模板引用</em></strong> ？</a></li><li class="h2 secondary ng-star-inserted" title="什么是 Angular 编译器？"><a href="guide/ngmodule-faq#what-is-the-angular-compiler">什么是 Angular 编译器？</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><p translation-result="on">NgModules 可以帮你把应用组织成一些紧密相关的代码块。</p><p translation-origin="off">NgModules help organize an application into cohesive blocks of functionality.</p><p translation-result="on">这里回答的是开发者常问起的关于 NgModule 的设计与实现问题。</p><p translation-origin="off">This page answers the questions many developers ask about NgModule design and implementation.</p><h2 id="what-classes-should-i-add-to-the-declarations-array" translation-result="on">我应该把哪些类加到 <em>declarations</em> 中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-classes-should-i-add-to-the-declarations-array"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-classes-should-i-add-to-the-declarations-array">What classes should I add to the <code>declarations</code> array?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-classes-should-i-add-to-the-declarations-array"><i class="material-icons">link</i></a></h2><p translation-result="on">把<a href="guide/bootstrapping#the-declarations-array">可声明</a>的类（组件、指令和管道）添加到 <code>declarations</code> 列表中。</p><p translation-origin="off">Add <a href="guide/bootstrapping#the-declarations-array">declarable</a> classes—components, directives, and pipes—to a <code>declarations</code> list.</p><p translation-result="on">这些类只能在应用程序的<em>一个并且只有一个</em>模块中声明。 只有当它们<em>从属于</em>某个模块时，才能把在<em>此</em>模块中声明它们。</p><p translation-origin="off">Declare these classes in <em>exactly one</em> module of the application. Declare them in a module if they belong to that particular module.</p><hr><a id="q-declarable"></a><h2 id="what-is-a-declarable" translation-result="on">什么是<em>可声明的</em>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-a-declarable"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-is-a-declarable">What is a <em>declarable</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-a-declarable"><i class="material-icons">link</i></a></h2><p translation-result="on"><em>可声明的</em>就是组件、指令和管道这些可以被加到模块的 <code>declarations</code> 列表中的类。它们也是<em>所有</em>能被加到 <code>declarations</code> 中的类。</p><p translation-origin="off">Declarables are the class types—components, directives, and pipes—that you can add to a module's <code>declarations</code> list. They're the only classes that you can add to <code>declarations</code>.</p><hr><h2 id="what-classes-should-i-not-add-to-declarations" translation-result="on">哪些类<em>不</em>应该加到 <code>declarations</code> 中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-classes-should-i-not-add-to-declarations"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-classes-should-i-not-add-to-declarations">What classes should I <em>not</em> add to <code>declarations</code>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-classes-should-i-not-add-to-declarations"><i class="material-icons">link</i></a></h2><p translation-result="on">只有<a href="guide/ngmodule-faq#q-declarable">可声明的</a>类才能加到模块的 <code>declarations</code> 列表中。</p><p translation-origin="off">Add only <a href="guide/bootstrapping#the-declarations-array">declarable</a> classes to an NgModule's <code>declarations</code> list.</p><p translation-result="on"><em>不要</em>声明：</p><p translation-origin="off">Do <em>not</em> declare the following:</p><ul><li><p translation-result="on">已经在其它模块中声明过的类。无论它来自应用自己的模块（@NgModule）还是第三方模块。</p><p translation-origin="off">A class that's already declared in another module, whether an app module, @NgModule, or third-party module.</p></li><li><p translation-result="on">从其它模块中导入的指令。例如，不要声明来自 <code>@angular/forms</code> 的 FORMS_DIRECTIVES，因为 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 已经声明过它们了。</p><p translation-origin="off">An array of directives imported from another module. For example, don't declare <code>FORMS_DIRECTIVES</code> from <code>@angular/forms</code> because the <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> already declares it.</p></li><li><p translation-result="on">模块类。</p><p translation-origin="off">Module classes.</p></li><li><p translation-result="on">服务类</p><p translation-origin="off">Service classes.</p></li><li><p translation-result="on">非 Angular 的类和对象，比如：字符串、数字、函数、实体模型、配置、业务逻辑和辅助类。</p><p translation-origin="off">Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes.</p></li></ul><hr><h2 id="why-list-the-same-component-in-multiple-ngmodule-properties" translation-result="on">为什么要把同一个组件声明在不同的 <em>NgModule</em> 属性中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-list-the-same-component-in-multiple-ngmodule-properties"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-list-the-same-component-in-multiple-ngmodule-properties">Why list the same component in multiple <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> properties?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-list-the-same-component-in-multiple-ngmodule-properties"><i class="material-icons">link</i></a></h2><p translation-result="on"><code>AppComponent</code> 经常被同时列在 <code>declarations</code> 和 <code>bootstrap</code> 中。 另外你还可能看到 <code>HeroComponent</code> 被同时列在 <code>declarations</code>、<code>exports</code> 和 <code>entryComponent</code> 中。</p><p translation-origin="off"><code>AppComponent</code> is often listed in both <code>declarations</code> and <code>bootstrap</code>. You might see the same component listed in <code>declarations</code>, <code>exports</code>, and <code>entryComponents</code>.</p><p translation-result="on">这<em>看起来</em>是多余的，不过这些函数具有不同的功能，从它出现在一个列表中无法推断出它也应该在另一个列表中。</p><p translation-origin="off">While that seems redundant, these properties have different functions. Membership in one list doesn't imply membership in another list.</p><ul><li><p translation-result="on"> <code>AppComponent</code> 可能被声明在此模块中，但可能不是引导组件。</p><p translation-origin="off"><code>AppComponent</code> could be declared in this module but not bootstrapped.</p></li><li><p translation-result="on"> <code>AppComponent</code> 可能在此模块中引导，但可能是由另一个特性模块声明的。</p><p translation-origin="off"><code>AppComponent</code> could be bootstrapped in this module but declared in a different feature module.</p></li><li><p translation-result="on">某个组件可能是从另一个应用模块中导入的（所以你没法声明它）并且被当前模块重新导出。</p><p translation-origin="off">A component could be imported from another app module (so you can't declare it) and re-exported by this module.</p></li><li><p translation-result="on">某个组件可能被导出，以便用在外部组件的模板中，也可能同时被一个弹出式对话框加载。</p><p translation-origin="off">A component could be exported for inclusion in an external component's template as well as dynamically loaded in a pop-up dialog.</p></li></ul><hr><h2 id="what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean" translation-result="on">"<em>Can't bind to 'x' since it isn't a known property of 'y'</em>"是什么意思？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean">What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean"><i class="material-icons">link</i></a></h2><p translation-result="on">这个错误通常意味着你或者忘了声明指令“x”，或者你没有导入“x”所属的模块。</p><p translation-origin="off">This error often means that you haven't declared the directive "x" or haven't imported the NgModule to which "x" belongs.</p><div class="alert is-helpful"><p translation-result="on">如果“x”其实不是属性，或者是组件的私有属性（比如它不带 <code>@<a href="api/core/Input" class="code-anchor">Input</a></code> 或 <code>@<a href="api/core/Output" class="code-anchor">Output</a></code> 装饰器），那么你也同样会遇到这个错误。</p><p translation-origin="off">Perhaps you declared "x" in an application sub-module but forgot to export it. The "x" class isn't visible to other modules until you add it to the <code>exports</code> list.</p></div><hr><h2 id="what-should-i-import" translation-result="on">我应该导入什么？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-import"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-should-i-import">What should I import?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-import"><i class="material-icons">link</i></a></h2><p translation-result="on">导入你需要在当前模块的组件模板中使用的那些公开的（被导出的）<a href="guide/ngmodule-faq#q-declarable">可声明类</a>。</p><p translation-origin="off">Import NgModules whose public (exported) <a href="guide/bootstrapping#the-declarations-array">declarable classes</a> you need to reference in this module's component templates.</p><p translation-result="on">这意味着要从 <code>@angular/common</code> 中导入 <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> 才能访问 Angular 的内置指令，比如 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 和 <code>NgFor</code>。 你可以直接导入它或者从<a href="guide/ngmodule-faq#q-reexport">重新导出</a>过该模块的其它模块中导入它。</p><p translation-origin="off">This always means importing <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> from <code>@angular/common</code> for access to the Angular directives such as <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> and <code>NgFor</code>. You can import it directly or from another NgModule that <a href="guide/ngmodule-faq#q-reexport">re-exports</a> it.</p><p translation-result="on">如果你的组件有 <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> 双向绑定表达式，就要从 <code>@angular/forms</code> 中导入 <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code>。</p><p translation-origin="off">Import <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> from <code>@angular/forms</code> if your components have <code>[(<a href="api/forms/NgModel" class="code-anchor">ngModel</a>)]</code> two-way binding expressions.</p><p translation-result="on">如果当前模块中的组件包含了<em>共享</em>模块和<em>特性</em>模块中的组件、指令和管道，就导入这些模块。</p><p translation-origin="off">Import <em>shared</em> and <em>feature</em> modules when this module's components incorporate their components, directives, and pipes.</p><p translation-result="on">只能在根模块 <code>AppModule</code> 中<a href="guide/ngmodule-faq#q-browser-vs-common-module">导入<em>BrowserModule</em></a>。</p><p translation-origin="off">Import <a href="guide/ngmodule-faq#q-browser-vs-common-module">BrowserModule</a> only in the root <code>AppModule</code>.</p><hr><a id="q-browser-vs-common-module"></a><h2 id="should-i-import-browsermodule-or-commonmodule" translation-result="on">我应该导入 <em>BrowserModule</em> 还是 <em>CommonModule</em>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-import-browsermodule-or-commonmodule"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="should-i-import-browsermodule-or-commonmodule">Should I import <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> or <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-import-browsermodule-or-commonmodule"><i class="material-icons">link</i></a></h2><p translation-result="on">几乎所有要在浏览器中使用的应用的<strong>根模块</strong>（<code>AppModule</code>）都应该从 <code>@angular/platform-browser</code> 中导入 <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>。</p><p translation-origin="off">The root application module, <code>AppModule</code>, of almost every browser application should import <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> from <code>@angular/platform-browser</code>.</p><p translation-result="on"><code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> 提供了启动和运行浏览器应用的那些基本的服务提供者。</p><p translation-origin="off"><code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> provides services that are essential to launch and run a browser app.</p><p translation-result="on"><code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> 还从 <code>@angular/common</code> 中重新导出了 <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code>，这意味着 <code>AppModule</code> 中的组件也同样可以访问那些每个应用都需要的 Angular 指令，如 <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> 和 <code>NgFor</code>。</p><p translation-origin="off"><code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> also re-exports <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> from <code>@angular/common</code>, which means that components in the <code>AppModule</code> module also have access to the Angular directives every app needs, such as <code><a href="api/common/NgIf" class="code-anchor">NgIf</a></code> and <code>NgFor</code>.</p><p translation-result="on">在其它任何模块中都<em>不要导入</em><code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>。 <em>特性模块</em>和<em>惰性加载模块</em>应该改成导入 <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code>。 它们需要通用的指令。它们不需要重新初始化全应用级的提供者。</p><p translation-origin="off">Do not import <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> in any other module. <em>Feature modules</em> and <em>lazy-loaded modules</em> should import <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> instead. They need the common directives. They don't need to re-install the app-wide providers.</p><p translation-result="on">特性模块中导入 <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> 可以让它能用在任何目标平台上，不仅是浏览器。那些跨平台库的作者应该喜欢这种方式的。</p><p translation-origin="off">Importing <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code> also frees feature modules for use on <em>any</em> target platform, not just browsers.</p><hr><a id="q-reimport"></a><h2 id="what-if-i-import-the-same-module-twice" translation-result="on">如果我两次导入同一个模块会怎么样？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-if-i-import-the-same-module-twice"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-if-i-import-the-same-module-twice">What if I import the same module twice?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-if-i-import-the-same-module-twice"><i class="material-icons">link</i></a></h2><p translation-result="on">没有任何问题。当三个模块全都导入模块'A'时，Angular 只会首次遇到时加载一次模块'A'，之后就不会这么做了。</p><p translation-origin="off">That's not a problem. When three modules all import Module 'A', Angular evaluates Module 'A' once, the first time it encounters it, and doesn't do so again.</p><p translation-result="on">无论 <code>A</code> 出现在所导入模块的哪个层级，都会如此。 如果模块'B'导入模块'A'、模块'C'导入模块'B'，模块'D'导入 <code>[C, B, A]</code>，那么'D'会触发模块'C'的加载，'C'会触发'B'的加载，而'B'会加载'A'。 当 Angular 在'D'中想要获取'B'和'A'时，这两个模块已经被缓存过了，可以立即使用。</p><p translation-origin="off">That's true at whatever level <code>A</code> appears in a hierarchy of imported NgModules. When Module 'B' imports Module 'A', Module 'C' imports 'B', and Module 'D' imports <code>[C, B, A]</code>, then 'D' triggers the evaluation of 'C', which triggers the evaluation of 'B', which evaluates 'A'. When Angular gets to the 'B' and 'A' in 'D', they're already cached and ready to go.</p><p translation-result="on">Angular 不允许模块之间出现循环依赖，所以不要让模块'A'导入模块'B'，而模块'B'又导入模块'A'。</p><p translation-origin="off">Angular doesn't like NgModules with circular references, so don't let Module 'A' import Module 'B', which imports Module 'A'.</p><hr><a id="q-reexport"></a><h2 id="what-should-i-export" translation-result="on">我应该导出什么？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-export"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-should-i-export">What should I export?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-export"><i class="material-icons">link</i></a></h2><p translation-result="on">导出那些<em>其它模块</em>希望在自己的模板中引用的<a href="guide/ngmodule-faq#q-declarable">可声明类</a>。这些也是你的<em>公共</em>类。 如果你不导出某个类，它就是<em>私有的</em>，只对当前模块中声明的其它组件可见。</p><p translation-origin="off">Export <a href="guide/bootstrapping#the-declarations-array">declarable</a> classes that components in <em>other</em> NgModules are able to reference in their templates. These are your <em>public</em> classes. If you don't export a declarable class, it stays <em>private</em>, visible only to other components declared in this NgModule.</p><p translation-result="on">你<em>可以</em>导出任何可声明类（组件、指令和管道），而不用管它是声明在当前模块中还是某个导入的模块中。</p><p translation-origin="off">You <em>can</em> export any declarable class—components, directives, and pipes—whether it's declared in this NgModule or in an imported NgModule.</p><p translation-result="on">你<em>可以</em>重新导出整个导入过的模块，这将导致重新导出它们导出的所有类。重新导出的模块甚至不用先导入。</p><p translation-origin="off">You <em>can</em> re-export entire imported NgModules, which effectively re-exports all of their exported classes. An NgModule can even export a module that it doesn't import.</p><hr><h2 id="what-should-i-not-export" translation-result="on">我<em>不应该</em>导出什么？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-not-export"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-should-i-not-export">What should I <em>not</em> export?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-should-i-not-export"><i class="material-icons">link</i></a></h2><p translation-result="on"><em>不要</em>导出：</p><p translation-origin="off">Don't export the following:</p><ul><li><p translation-result="on">那些你只想在当前模块中声明的那些组件中使用的私有组件、指令和管道。如果你不希望任何模块看到它，就不要导出。</p><p translation-origin="off">Private components, directives, and pipes that you need only within components declared in this NgModule. If you don't want another NgModule to see it, don't export it.</p></li><li><p translation-result="on">不可声明的对象，比如服务、函数、配置、实体模型等。</p><p translation-origin="off">Non-declarable objects such as services, functions, configurations, and entity models.</p></li><li><p translation-result="on">那些只被路由器或引导函数动态加载的组件。 比如<a href="guide/ngmodule-faq#q-entry-component-defined">入口组件</a>可能从来不会在其它组件的模板中出现。 导出它们没有坏处，但也没有好处。</p><p translation-origin="off">Components that are only loaded dynamically by the router or by bootstrapping. Such <a href="guide/ngmodule-faq#q-entry-component-defined">entry components</a> can never be selected in another component's template. While there's no harm in exporting them, there's also no benefit.</p></li><li><p translation-result="on">纯服务模块没有公开（导出）的声明。 例如，没必要重新导出 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>，因为它不导出任何东西。 它唯一的用途是一起把 http 的那些服务提供者添加到应用中。</p><p translation-origin="off">Pure service modules that don't have public (exported) declarations. For example, there's no point in re-exporting <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> because it doesn't export anything. Its only purpose is to add http service providers to the application as a whole.</p></li></ul><hr><h2 id="can-i-re-export-classes-and-modules" translation-result="on">我可以重新导出类和模块吗？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#can-i-re-export-classes-and-modules"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="can-i-re-export-classes-and-modules">Can I re-export classes and modules?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#can-i-re-export-classes-and-modules"><i class="material-icons">link</i></a></h2><p translation-result="on">毫无疑问！</p><p translation-origin="off">Absolutely.</p><p translation-result="on">模块是从其它模块中选取类并把它们重新导出成统一、便利的新模块的最佳方式。</p><p translation-origin="off">NgModules are a great way to selectively aggregate classes from other NgModules and re-export them in a consolidated, convenience module.</p><p translation-result="on">模块可以重新导出其它模块，这会导致重新导出它们导出的所有类。 Angular 自己的 <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> 就重新导出了一组模块，例如：</p><p translation-origin="off">An NgModule can re-export entire NgModules, which effectively re-exports all of their exported classes. Angular's own <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code> exports a couple of NgModules like this:</p><code-example language="typescript" ng-version="9.0.0-rc.11"><div style="display:none">exports: [<a href="api/common/CommonModule" class="code-anchor">CommonModule</a>, <a href="api/core/ApplicationModule" class="code-anchor">ApplicationModule</a>]</div><aio-code><pre class="lang-typescript prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">exports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><a href="api/common/CommonModule" class="code-anchor"><span class="typ">CommonModule</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/ApplicationModule" class="code-anchor"><span class="typ">ApplicationModule</span></a><span class="pun">]</span></code>
    </pre></aio-code></code-example><p translation-result="on">模块还能导出一个组合，它可以包含自己的声明、某些导入的类以及导入的模块。</p><p translation-origin="off">An NgModule can export a combination of its own declarations, selected imported classes, and imported NgModules.</p><p translation-result="on">不要费心去导出纯服务类。 纯服务类的模块不会导出任何可供其它模块使用的<a href="guide/ngmodule-faq#q-declarable">可声明类</a>。 例如，不用重新导出 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>，因为它没有导出任何东西。 它唯一的用途是把那些 http 服务提供者一起添加到应用中。</p><p translation-origin="off">Don't bother re-exporting pure service modules. Pure service modules don't export <a href="guide/bootstrapping#the-declarations-array">declarable</a> classes that another NgModule could use. For example, there's no point in re-exporting <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> because it doesn't export anything. Its only purpose is to add http service providers to the application as a whole.</p><hr><h2 id="what-is-the-forroot-method" translation-result="on"><em>forRoot()</em>方法是什么？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-the-forroot-method"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-is-the-forroot-method">What is the <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> method?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-the-forroot-method"><i class="material-icons">link</i></a></h2><p translation-result="on">静态方法 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> 是一个约定，它可以让开发人员更轻松的配置模块的想要单例使用的服务及其提供者。<code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code> 就是一个很好的例子。</p><p translation-origin="off">The <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> static method is a convention that makes it easy for developers to configure services and providers that are intended to be singletons. A good example of <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> is the <code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code> method.</p><p translation-result="on">应用把一个 <code><a href="api/router/Routes" class="code-anchor">Routes</a></code> 对象传给 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code>，为的就是使用路由配置全应用级的 <code><a href="api/router/Router" class="code-anchor">Router</a></code> 服务。 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code> 返回一个<a href="api/core/ModuleWithProviders">ModuleWithProviders</a>对象。 你把这个结果添加到根模块 <code>AppModule</code> 的 <code>imports</code> 列表中。</p><p translation-origin="off">Apps pass a <code><a href="api/router/Routes" class="code-anchor">Routes</a></code> object to <code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code> in order to configure the app-wide <code><a href="api/router/Router" class="code-anchor">Router</a></code> service with routes. <code><a href="api/router/RouterModule#forRoot" class="code-anchor">RouterModule.forRoot()</a></code> returns a <a href="api/core/ModuleWithProviders">ModuleWithProviders</a>. You add that result to the <code>imports</code> list of the root <code>AppModule</code>.</p><p translation-result="on">只能在应用的根模块 <code>AppModule</code> 中调用并导入 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> 的结果。 在其它模块，特别是惰性加载模块中，不要导入它。 要了解关于 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> 的更多信息，参见<a href="guide/singleton-services">单例服务</a>一章的 <a href="guide/singleton-services#the-forroot-pattern">the <code>forRoot()</code> 模式</a>部分。</p><p translation-origin="off">Only call and import a <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> result in the root application module, <code>AppModule</code>. Avoid importing it in any other module, particularly in a lazy-loaded module. For more information on <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> see <a href="guide/singleton-services#the-forroot-pattern">the <code>forRoot()</code> pattern</a> section of the <a href="guide/singleton-services">Singleton Services</a> guide.</p><p translation-result="on">对于服务来说，除了可以使用 <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code>外，更好的方式是在该服务的 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> 装饰器中指定 <code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code>，它让该服务自动在全应用级可用，这样它也就默认是单例的。</p><p translation-origin="off">For a service, instead of using <code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code>, specify <code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code> on the service's <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> decorator, which makes the service automatically available to the whole application and thus singleton by default.</p><p translation-result="on"><code><a href="api/router/RouterModule" class="code-anchor">RouterModule</a></code> 也提供了静态方法 <code><a href="api/router/RouterModule#forChild" class="code-anchor">forChild()</a></code>，用于配置惰性加载模块的路由。</p><p translation-origin="off"><code><a href="api/router/RouterModule" class="code-anchor">RouterModule</a></code> also offers a <code><a href="api/router/RouterModule#forChild" class="code-anchor">forChild()</a></code> static method for configuring the routes of lazy-loaded modules.</p><p translation-result="on"><code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> 和 <code><a href="api/router/RouterModule#forChild" class="code-anchor">forChild()</a></code> 都是约定俗成的方法名，它们分别用于在根模块和特性模块中配置服务。</p><p translation-origin="off"><code><a href="api/router/RouterModule#forRoot" class="code-anchor">forRoot()</a></code> and <code><a href="api/router/RouterModule#forChild" class="code-anchor">forChild()</a></code> are conventional names for methods that configure services in root and feature modules respectively.</p><p translation-result="on">当你写类似的需要可配置的服务提供者时，请遵循这个约定。</p><p translation-origin="off">Follow this convention when you write similar modules with configurable service providers.</p><hr><h2 id="why-is-a-service-provided-in-a-feature-module-visible-everywhere" translation-result="on">为什么服务提供者在特性模块中的任何地方都是可见的？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-a-service-provided-in-a-feature-module-visible-everywhere"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-is-a-service-provided-in-a-feature-module-visible-everywhere">Why is a service provided in a feature module visible everywhere?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-a-service-provided-in-a-feature-module-visible-everywhere"><i class="material-icons">link</i></a></h2><p translation-result="on">列在引导模块的 <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> 中的服务提供者具有<strong>全应用级作用域</strong>。 往 <code><a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> 中添加服务提供者将导致该服务被发布到整个应用中。</p><p translation-origin="off">Providers listed in the <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> of a bootstrapped module have application scope. Adding a service provider to <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> effectively publishes the service to the entire application.</p><p translation-result="on">当你导入一个模块时，Angular 就会把该模块的服务提供者（也就是它的 <code>providers</code> 列表中的内容）加入该应用的<em>根注入器</em>中。</p><p translation-origin="off">When you import an NgModule, Angular adds the module's service providers (the contents of its <code>providers</code> list) to the application root injector.</p><p translation-result="on">这会让该提供者对应用中所有知道该提供者令牌（token）的类都可见。</p><p translation-origin="off">This makes the provider visible to every class in the application that knows the provider's lookup token, or name.</p><p translation-result="on">通过 NgModule 导入来实现可扩展性是 NgModule 体系的主要设计目标。 把 NgModule 的提供者并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。 只要添加一次 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>，那么应用中的每个组件就都可以发起 Http 请求了。</p><p translation-origin="off">Extensibility through NgModule imports is a primary goal of the NgModule system. Merging NgModule providers into the application injector makes it easy for a module library to enrich the entire application with new services. By adding the <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> once, every application component can make HTTP requests.</p><p translation-result="on">不过，如果你期望模块的服务只对那个特性模块内部声明的组件可见，那么这可能会带来一些不受欢迎的意外。 如果 <code>HeroModule</code> 提供了一个 <code>HeroService</code>，并且根模块 <code>AppModule</code> 导入了 <code>HeroModule</code>，那么任何知道 <code>HeroService</code><em>类型</em>的类都可能注入该服务，而不仅是在 <code>HeroModule</code> 中声明的那些类。</p><p translation-origin="off">However, this might feel like an unwelcome surprise if you expect the module's services to be visible only to the components declared by that feature module. If the <code>HeroModule</code> provides the <code>HeroService</code> and the root <code>AppModule</code> imports <code>HeroModule</code>, any class that knows the <code>HeroService</code> <em>type</em> can inject that service, not just the classes declared in the <code>HeroModule</code>.</p><p translation-result="on">要限制对某个服务的访问，可以考虑惰性加载提供该服务的 NgModule。参见<a href="guide/ngmodule-faq#service-scope">我要如何把服务的范围限定为某个模块？</a>。</p><p translation-origin="off">To limit access to a service, consider lazy loading the NgModule that provides that service. See <a href="guide/ngmodule-faq#service-scope">How do I restrict service scope to a module?</a> for more information.</p><hr><a id="q-lazy-loaded-module-provider-visibility"></a><h2 id="why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module" translation-result="on">为什么在惰性加载模块中声明的服务提供者只对该模块自身可见？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module">Why is a service provided in a lazy-loaded module visible only to that module?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module"><i class="material-icons">link</i></a></h2><p translation-result="on">和启动时就加载的模块中的提供者不同，惰性加载模块中的提供者是<em>局限于模块</em>的。</p><p translation-origin="off">Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are <em>module-scoped</em>.</p><p translation-result="on">当 Angular 路由器惰性加载一个模块时，它创建了一个新的运行环境。 那个环境<a href="guide/ngmodule-faq#q-why-child-injector" title="为什么 Angular 会创建子注入器">拥有自己的注入器</a>，它是应用注入器的直属子级。</p><p translation-origin="off">When the Angular router lazy-loads a module, it creates a new execution context. That <a href="guide/ngmodule-faq#q-why-child-injector" title="Why Angular creates a child injector">context has its own injector</a>, which is a direct child of the application injector.</p><p translation-result="on">路由器把该惰性加载模块的提供者和它导入的模块的提供者添加到这个子注入器中。</p><p translation-origin="off">The router adds the lazy module's providers and the providers of its imported NgModules to this child injector.</p><p translation-result="on">这些提供者不会被拥有相同令牌的应用级别提供者的变化所影响。 当路由器在惰性加载环境中创建组件时，Angular 优先使用惰性加载模块中的服务实例，而不是来自应用的根注入器的。</p><p translation-origin="off">These providers are insulated from changes to application providers with the same lookup token. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.</p><hr><h2 id="what-if-two-modules-provide-the-same-service" translation-result="on">如果两个模块提供了<em>同一个</em>服务会怎么样？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-if-two-modules-provide-the-same-service"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-if-two-modules-provide-the-same-service">What if two modules provide the same service?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-if-two-modules-provide-the-same-service"><i class="material-icons">link</i></a></h2><p translation-result="on">当同时加载了两个导入的模块，它们都列出了使用同一个令牌的提供者时，后导入的模块会“获胜”，这是因为这两个提供者都被添加到了同一个注入器中。</p><p translation-origin="off">When two imported modules, loaded at the same time, list a provider with the same token, the second module's provider "wins". That's because both providers are added to the same injector.</p><p translation-result="on">当 Angular 尝试根据令牌注入服务时，它使用第二个提供者来创建并交付服务实例。</p><p translation-origin="off">When Angular looks to inject a service for that token, it creates and delivers the instance created by the second provider.</p><p translation-result="on"><em>每个</em>注入了该服务的类获得的都是由第二个提供者创建的实例。 即使是声明在第一个模块中的类，它取得的实例也是来自第二个提供者的。</p><p translation-origin="off"><em>Every</em> class that injects this service gets the instance created by the second provider. Even classes declared within the first module get the instance created by the second provider.</p><p translation-result="on">如果模块 A 提供了一个使用令牌'X'的服务，并且导入的模块 B 也用令牌'X'提供了一个服务，那么模块 A 中定义的服务“获胜”了。</p><p translation-origin="off">If NgModule A provides a service for token 'X' and imports an NgModule B that also provides a service for token 'X', then NgModule A's service definition "wins".</p><p translation-result="on">由根 <code>AppModule</code> 提供的服务相对于所导入模块中提供的服务有优先权。换句话说：<code>AppModule</code> 总会获胜。</p><p translation-origin="off">The service provided by the root <code>AppModule</code> takes precedence over services provided by imported NgModules. The <code>AppModule</code> always wins.</p><hr><a id="service-scope"></a><h2 id="how-do-i-restrict-service-scope-to-a-module" translation-result="on">我应该如何把服务的范围限制到模块中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-do-i-restrict-service-scope-to-a-module"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="how-do-i-restrict-service-scope-to-a-module">How do I restrict service scope to a module?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-do-i-restrict-service-scope-to-a-module"><i class="material-icons">link</i></a></h2><p translation-result="on">如果一个模块在应用程序启动时就加载，它的 <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> 具有<strong><em>全应用级作用域</em></strong>。 它们也可用于整个应用的注入中。</p><p translation-origin="off">When a module is loaded at application launch, its <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> have <em>application-wide scope</em>; that is, they are available for injection throughout the application.</p><p translation-result="on">导入的提供者很容易被由其它导入模块中的提供者替换掉。 这虽然是故意这样设计的，但是也可能引起意料之外的结果。</p><p translation-origin="off">Imported providers are easily replaced by providers from another imported NgModule. Such replacement might be by design. It could be unintentional and have adverse consequences.</p><p translation-result="on">作为一个通用的规则，应该<em>只导入一次</em>带提供者的模块，最好在应用的<em>根模块</em>中。 那里也是配置、包装和改写这些服务的最佳位置。</p><p translation-origin="off">As a general rule, import modules with providers <em>exactly once</em>, preferably in the application's <em>root module</em>. That's also usually the best place to configure, wrap, and override them.</p><p translation-result="on">假设模块需要一个定制过的 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code>，它为所有的 Http 请求添加一个特别的请求头。 如果应用中其它地方的另一个模块也定制了 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 或仅仅导入了 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>，它就会改写当前模块的 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 提供者，丢掉了这个特别的请求头。 这样服务器就会拒绝来自该模块的请求。</p><p translation-origin="off">Suppose a module requires a customized <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> that adds a special header for all Http requests. If another module elsewhere in the application also customizes <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> or merely imports the <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>, it could override this module's <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> provider, losing the special header. The server will reject http requests from this module.</p><p translation-result="on">要消除这个问题，就只能在应用的根模块 <code>AppModule</code> 中导入 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>。</p><p translation-origin="off">To avoid this problem, import the <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> only in the <code>AppModule</code>, the application <em>root module</em>.</p><p translation-result="on">如果你必须防范这种“提供者腐化”现象，那就<em>不要依赖于“启动时加载”模块的 <code>providers</code></em>。</p><p translation-origin="off">If you must guard against this kind of "provider corruption", <em>don't rely on a launch-time module's <code>providers</code>.</em></p><p translation-result="on">只要可能，就让模块惰性加载。 Angular 给了<a href="guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility">惰性加载模块</a>自己的子注入器。 该模块中的提供者只对由该注入器创建的组件树可见。</p><p translation-origin="off">Load the module lazily if you can. Angular gives a <a href="guide/ngmodule-faq#q-lazy-loaded-module-provider-visibility">lazy-loaded module</a> its own child injector. The module's providers are visible only within the component tree created with this injector.</p><p translation-result="on">如果你必须在应用程序启动时主动加载该模块，<strong><em>就改成在组件中提供该服务</em></strong>。</p><p translation-origin="off">If you must load the module eagerly, when the application starts, <em>provide the service in a component instead.</em></p><p translation-result="on">继续看这个例子，假设某个模块的组件真的需要一个私有的、自定义的 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code>。</p><p translation-origin="off">Continuing with the same example, suppose the components of a module truly require a private, custom <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code>.</p><p translation-result="on">那就创建一个“顶层组件”来扮演该模块中所有组件的根。 把这个自定义的 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 提供者添加到这个顶层组件的 <code>providers</code> 列表中，而不是该模块的 <code>providers</code> 中。 回忆一下，Angular 会为每个组件实例创建一个子注入器，并使用组件自己的 <code>providers</code> 来配置这个注入器。</p><p translation-origin="off">Create a "top component" that acts as the root for all of the module's components. Add the custom <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> provider to the top component's <code>providers</code> list rather than the module's <code>providers</code>. Recall that Angular creates a child injector for each component instance and populates the injector with the component's own providers.</p><p translation-result="on">当该组件的子组件<em>想要</em>一个 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 服务时，Angular 会提供一个局部的 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 服务，而不是应用的根注入器创建的那个。 子组件将正确发起 http 请求，而不管其它模块对 <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> 做了什么。</p><p translation-origin="off">When a child of this component asks for the <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> service, Angular provides the local <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code> service, not the version provided in the application root injector. Child components make proper HTTP requests no matter what other modules do to <code><a href="api/common/http/HttpBackend" class="code-anchor">HttpBackend</a></code>.</p><p translation-result="on">确保把模块中的组件都创建成这个顶层组件的子组件。</p><p translation-origin="off">Be sure to create module components as children of this module's top component.</p><p translation-result="on">你可以把这些子组件都嵌在顶层组件的模板中。或者，给顶层组件一个 <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code>，让它作为路由的宿主。 定义子路由，并让路由器把模块中的组件加载进该路由出口（outlet）中。</p><p translation-origin="off">You can embed the child components in the top component's template. Alternatively, make the top component a routing host by giving it a <code>&lt;<a href="api/router/RouterOutlet" class="code-anchor">router-outlet</a>&gt;</code>. Define child routes and let the router load module components into that outlet.</p><p translation-result="on">虽然通过在惰性加载模块中或组件中提供某个服务来限制它的访问都是可行的方式，但在组件中提供服务可能导致这些服务出现多个实例。因此，应该优先使用惰性加载的方式。</p><p translation-origin="off">Though you can limit access to a service by providing it in a lazy loaded module or providing it in a component, providing services in a component can lead to multiple instances of those services. Thus, the lazy loading is preferable.</p><hr><a id="q-root-component-or-module"></a><h2 id="should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent" translation-result="on">我应该把全应用级提供者添加到根模块 <code>AppModule</code> 中还是根组件 <code>AppComponent</code> 中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent">Should I add application-wide providers to the root <code>AppModule</code> or the root <code>AppComponent</code>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent"><i class="material-icons">link</i></a></h2><p translation-result="on">通过在服务的 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> 装饰器中（例如服务）指定 <code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code> 来定义全应用级提供者，或者 <code><a href="api/core/InjectionToken" class="code-anchor">InjectionToken</a></code> 的构造器（例如提供令牌的地方），都可以定义全应用级提供者。 通过这种方式创建的服务提供者会自动在整个应用中可用，而不用把它列在任何模块中。</p><p translation-origin="off">Define application-wide providers by specifying <code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code> on its <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> decorator (in the case of services) or at <code><a href="api/core/InjectionToken" class="code-anchor">InjectionToken</a></code> construction (in the case where tokens are provided). Providers that are created this way automatically are made available to the entire application and don't need to be listed in any module.</p><p translation-result="on">如果某个提供者不能用这种方式配置（可能因为它没有有意义的默认值），那就在根模块 <code>AppModule</code> 中注册这些全应用级服务，而不是在 <code>AppComponent</code> 中。</p><p translation-origin="off">If a provider cannot be configured in this way (perhaps because it has no sensible default value), then register application-wide providers in the root <code>AppModule</code>, not in the <code>AppComponent</code>.</p><p translation-result="on">惰性加载模块及其组件可以注入 <code>AppModule</code> 中的服务，却不能注入 <code>AppComponent</code> 中的。</p><p translation-origin="off">Lazy-loaded modules and their components can inject <code>AppModule</code> services; they can't inject <code>AppComponent</code> services.</p><p translation-result="on"><em>只有</em>当该服务必须对 <code>AppComponent</code> 组件树之外的组件不可见时，才应该把服务注册进 <code>AppComponent</code> 的 <code>providers</code> 中。 这是一个非常罕见的异常用法。</p><p translation-origin="off">Register a service in <code>AppComponent</code> providers <em>only</em> if the service must be hidden from components outside the <code>AppComponent</code> tree. This is a rare use case.</p><p translation-result="on">更一般地说，<a href="guide/ngmodule-faq#q-component-or-module">优先把提供者注册进模块中</a>，而不是组件中。</p><p translation-origin="off">More generally, <a href="guide/ngmodule-faq#q-component-or-module">prefer registering providers in NgModules</a> to registering in components.</p><h3 class="no-toc" id="discussion" translation-result="on">讨论<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#discussion"><i class="material-icons">link</i></a></h3><h3 class="no-toc" translation-origin="off" id="discussion">Discussion<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#discussion"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 把所有启动期模块的提供者都注册进了应用的根注入器中。 这些服务是由根注入器中的提供者创建的，并且在整个应用中都可用。 它们具有<em>应用级作用域</em>。</p><p translation-origin="off">Angular registers all startup module providers with the application root injector. The services that root injector providers create have application scope, which means they are available to the entire application.</p><p translation-result="on">某些服务（比如 <code><a href="api/router/Router" class="code-anchor">Router</a></code>）只有当注册进应用的根注入器时才能正常工作。</p><p translation-origin="off">Certain services, such as the <code><a href="api/router/Router" class="code-anchor">Router</a></code>, only work when you register them in the application root injector.</p><p translation-result="on">相反，Angular 使用 <code>AppComponent</code> 自己的注入器注册了 <code>AppComponent</code> 的提供者。 <code>AppComponent</code> 服务只在该组件及其子组件树中才能使用。 它们具有<em>组件级作用域</em>。</p><p translation-origin="off">By contrast, Angular registers <code>AppComponent</code> providers with the <code>AppComponent</code>'s own injector. <code>AppComponent</code> services are available only to that component and its component tree. They have component scope.</p><p translation-result="on"><code>AppComponent</code> 的注入器是根注入器的<em>子级</em>，注入器层次中的下一级。 这对于没有路由器的应用来说<em>几乎是</em>整个应用了。 但对那些带路由的应用，路由操作位于顶层，那里不存在 <code>AppComponent</code> 服务。这意味着惰性加载模块不能使用它们。</p><p translation-origin="off">The <code>AppComponent</code>'s injector is a child of the root injector, one down in the injector hierarchy. For applications that don't use the router, that's almost the entire application. But in routed applications, routing operates at the root level where <code>AppComponent</code> services don't exist. This means that lazy-loaded modules can't reach them.</p><hr><a id="q-component-or-module"></a><h2 id="should-i-add-other-providers-to-a-module-or-a-component" translation-result="on">我应该把其它提供者注册到模块中还是组件中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-add-other-providers-to-a-module-or-a-component"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="should-i-add-other-providers-to-a-module-or-a-component">Should I add other providers to a module or a component?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#should-i-add-other-providers-to-a-module-or-a-component"><i class="material-icons">link</i></a></h2><p translation-result="on">提供者应该使用 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code> 语法进行配置。只要可能，就应该把它们在应用的根注入器中提供（<code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code>）。 如果它们只被惰性加载的上下文中使用，那么这种方式配置的服务就是惰性加载的。</p><p translation-origin="off">Providers should be configured using <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a></code> syntax. If possible, they should be provided in the application root (<code><a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root'</code>). Services that are configured this way are lazily loaded if they are only used from a lazily loaded context.</p><p translation-result="on">如果要由消费方来决定是否把它作为全应用级提供者，那么就要在模块中（<code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code>）注册提供者，而不是组件中（<code>@Component.providers</code>）。</p><p translation-origin="off">If it's the consumer's decision whether a provider is available application-wide or not, then register providers in modules (<code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code>) instead of registering in components (<code>@Component.providers</code>).</p><p translation-result="on">当你<em>必须</em>把服务实例的范围限制到某个组件及其子组件树时，就把提供者注册到该组件中。 指令的提供者也同样照此处理。</p><p translation-origin="off">Register a provider with a component when you <em>must</em> limit the scope of a service instance to that component and its component tree. Apply the same reasoning to registering a provider with a directive.</p><p translation-result="on">例如，如果英雄编辑组件需要自己私有的缓存英雄服务实例，那就应该把 <code>HeroService</code> 注册进 <code>HeroEditorComponent</code> 中。 这样，每个新的 <code>HeroEditorComponent</code> 的实例都会得到一份自己的缓存服务实例。 编辑器的改动只会作用于它自己的服务，而不会影响到应用中其它地方的英雄实例。</p><p translation-origin="off">For example, an editing component that needs a private copy of a caching service should register the service with the component. Then each new instance of the component gets its own cached service instance. The changes that editor makes in its service don't touch the instances elsewhere in the application.</p><p translation-result="on"><a href="guide/ngmodule-faq#q-root-component-or-module">总是在根模块 <code>AppModule</code> 中注册<em>全应用级</em>服务</a>，而不要在根组件 <code>AppComponent</code> 中。</p><p translation-origin="off"><a href="guide/ngmodule-faq#q-root-component-or-module">Always register <em>application-wide</em> services with the root <code>AppModule</code></a>, not the root <code>AppComponent</code>.</p><hr><a id="q-why-bad"></a><h2 id="why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module" translation-result="on">为什么在共享模块中为惰性加载模块提供服务是个馊主意？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module">Why is it bad if a shared module provides a service to a lazy-loaded module?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module"><i class="material-icons">link</i></a></h2><h3 id="the-eagerly-loaded-scenario" translation-result="on">急性加载的场景<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#the-eagerly-loaded-scenario"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-eagerly-loaded-scenario">The eagerly loaded scenario<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#the-eagerly-loaded-scenario"><i class="material-icons">link</i></a></h3><p translation-result="on">当急性加载的模块提供了服务时，比如 <code>UserService</code>，该服务是在全应用级可用的。如果根模块提供了 <code>UserService</code>，并导入了另一个也提供了同一个 <code>UserService</code> 的模块，Angular 就会把它们中的一个注册进应用的根注入器中（参见<a href="guide/ngmodule-faq#q-reimport">如果两次导入了同一个模块会怎样？</a>）。</p><p translation-origin="off">When an eagerly loaded module provides a service, for example a <code>UserService</code>, that service is available application-wide. If the root module provides <code>UserService</code> and imports another module that provides the same <code>UserService</code>, Angular registers one of them in the root app injector (see <a href="guide/ngmodule-faq#q-reimport">What if I import the same module twice?</a>).</p><p translation-result="on">然后，当某些组件注入 <code>UserService</code> 时，Angular 就会发现它已经在应用的根注入器中了，并交付这个全应用级的单例服务。这样不会出现问题。</p><p translation-origin="off">Then, when some component injects <code>UserService</code>, Angular finds it in the app root injector, and delivers the app-wide singleton service. No problem.</p><h3 id="the-lazy-loaded-scenario" translation-result="on">惰性加载场景<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#the-lazy-loaded-scenario"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-lazy-loaded-scenario">The lazy loaded scenario<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#the-lazy-loaded-scenario"><i class="material-icons">link</i></a></h3><p translation-result="on">现在，考虑一个惰性加载的模块，它也提供了一个名叫 <code>UserService</code> 的服务。</p><p translation-origin="off">Now consider a lazy loaded module that also provides a service called <code>UserService</code>.</p><p translation-result="on">当路由器准备惰性加载 <code>HeroModule</code> 的时候，它会创建一个子注入器，并且把 <code>UserService</code> 的提供者注册到那个子注入器中。子注入器和根注入器是<em>不同</em>的。</p><p translation-origin="off">When the router lazy loads a module, it creates a child injector and registers the <code>UserService</code> provider with that child injector. The child injector is <em>not</em> the root injector.</p><p translation-result="on">当 Angular 创建一个惰性加载的 <code>HeroComponent</code> 时，它必须注入一个 <code>UserService</code>。 这次，它会从惰性加载模块的<em>子注入器</em>中查找 <code>UserService</code> 的提供者，并用它创建一个 <code>UserService</code> 的新实例。 这个 <code>UserService</code> 实例与 Angular 在主动加载的组件中注入的那个全应用级单例对象截然不同。</p><p translation-origin="off">When Angular creates a lazy component for that module and injects <code>UserService</code>, it finds a <code>UserService</code> provider in the lazy module's <em>child injector</em> and creates a <em>new</em> instance of the <code>UserService</code>. This is an entirely different <code>UserService</code> instance than the app-wide singleton version that Angular injected in one of the eagerly loaded components.</p><p translation-result="on">这个场景导致你的应用每次都创建一个新的服务实例，而不是使用单例的服务。</p><p translation-origin="off">This scenario causes your app to create a new instance every time, instead of using the singleton.</p><hr><a id="q-why-child-injector"></a><h2 id="why-does-lazy-loading-create-a-child-injector" translation-result="on">为什么惰性加载模块会创建一个子注入器？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-does-lazy-loading-create-a-child-injector"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-does-lazy-loading-create-a-child-injector">Why does lazy loading create a child injector?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-does-lazy-loading-create-a-child-injector"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 会把 <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> 中的提供者添加到应用的根注入器中…… 除非该模块是惰性加载的，这种情况下，Angular 会创建一<em>子注入器</em>，并且把该模块的提供者添加到这个子注入器中。</p><p translation-origin="off">Angular adds <code>@<a href="api/core/NgModule#providers" class="code-anchor">NgModule.providers</a></code> to the application root injector, unless the NgModule is lazy-loaded. For a lazy-loaded NgModule, Angular creates a <em>child injector</em> and adds the module's providers to the child injector.</p><p translation-result="on">这意味着模块的行为将取决于它是在应用启动期间加载的还是后来惰性加载的。如果疏忽了这一点，可能导致<a href="guide/ngmodule-faq#q-why-bad">严重后果</a>。</p><p translation-origin="off">This means that an NgModule behaves differently depending on whether it's loaded during application start or lazy-loaded later. Neglecting that difference can lead to <a href="guide/ngmodule-faq#q-why-bad">adverse consequences</a>.</p><p translation-result="on">为什么 Angular 不能像主动加载模块那样把惰性加载模块的提供者也添加到应用程序的根注入器中呢？为什么会出现这种不一致？</p><p translation-origin="off">Why doesn't Angular add lazy-loaded providers to the app root injector as it does for eagerly loaded NgModules?</p><p translation-result="on">归根结底，这来自于 Angular 依赖注入系统的一个基本特征： 在注入器还没有被第一次使用之前，可以不断为其添加提供者。 一旦注入器已经创建和开始交付服务，它的提供者列表就被冻结了，不再接受新的提供者。</p><p translation-origin="off">The answer is grounded in a fundamental characteristic of the Angular dependency-injection system. An injector can add providers <em>until it's first used</em>. Once an injector starts creating and delivering services, its provider list is frozen; no new providers are allowed.</p><p translation-result="on">当应用启动时，Angular 会首先使用所有主动加载模块中的提供者来配置根注入器，这发生在它创建第一个组件以及注入任何服务之前。 一旦应用开始工作，应用的根注入器就不再接受新的提供者了。</p><p translation-origin="off">When an applications starts, Angular first configures the root injector with the providers of all eagerly loaded NgModules <em>before</em> creating its first component and injecting any of the provided services. Once the application begins, the app root injector is closed to new providers.</p><p translation-result="on">之后，应用逻辑开始惰性加载某个模块。 Angular 必须把这个惰性加载模块中的提供者添加到<em>某个</em>注入器中。 但是它无法将它们添加到应用的根注入器中，因为根注入器已经不再接受新的提供者了。 于是，Angular 在惰性加载模块的上下文中创建了一个新的子注入器。</p><p translation-origin="off">Time passes and application logic triggers lazy loading of an NgModule. Angular must add the lazy-loaded module's providers to an injector somewhere. It can't add them to the app root injector because that injector is closed to new providers. So Angular creates a new child injector for the lazy-loaded module context.</p><hr><a id="q-is-it-loaded"></a><h2 id="how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded" translation-result="on">我要如何知道一个模块或服务是否已经加载过了？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded">How can I tell if an NgModule or service was previously loaded?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded"><i class="material-icons">link</i></a></h2><p translation-result="on">某些模块及其服务只能被根模块 <code>AppModule</code> 加载一次。 在惰性加载模块中再次导入这个模块会<a href="guide/ngmodule-faq#q-why-bad">导致错误的行为</a>，这个错误可能非常难于检测和诊断。</p><p translation-origin="off">Some NgModules and their services should be loaded only once by the root <code>AppModule</code>. Importing the module a second time by lazy loading a module could <a href="guide/ngmodule-faq#q-why-bad">produce errant behavior</a> that may be difficult to detect and diagnose.</p><p translation-result="on">为了防范这种风险，可以写一个构造函数，它会尝试从应用的根注入器中注入该模块或服务。如果这种注入成功了，那就说明这个类是被第二次加载的，你就可以抛出一个错误，或者采取其它挽救措施。</p><p translation-origin="off">To prevent this issue, write a constructor that attempts to inject the module or service from the root app injector. If the injection succeeds, the class has been loaded a second time. You can throw an error or take other remedial action.</p><p translation-result="on">某些 NgModule（例如 <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>）就实现了那样一个守卫。 下面是一个名叫 <code>GreetingModule</code> 的 NgModule 的 自定义构造函数。</p><p translation-origin="off">Certain NgModules, such as <code><a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a></code>, implement such a guard. Here is a custom constructor for an NgModule called <code>GreetingModule</code>.</p><code-example path="ngmodules/src/app/greeting/greeting.module.ts" region="ctor" header="src/app/greeting/greeting.module.ts (Constructor)" ng-version="9.0.0-rc.11"><div style="display:none">constructor (@<a href="api/core/Optional" class="code-anchor">Optional</a>() @<a href="api/core/SkipSelf" class="code-anchor">SkipSelf</a>() parentModule: GreetingModule) { if (parentModule) { throw new Error( 'GreetingModule is already loaded. Import it in the AppModule only'); } }</div><header class="ng-star-inserted">src/app/greeting/greeting.module.ts (Constructor)</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/greeting/greeting.module.ts (Constructor)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pln"> </span><span class="pun">(</span><span class="lit">@</span><a href="api/core/Optional" class="code-anchor"><span class="lit">Optional</span></a><span class="pun">()</span><span class="pln"> </span><span class="lit">@</span><a href="api/core/SkipSelf" class="code-anchor"><span class="lit">SkipSelf</span></a><span class="pun">()</span><span class="pln"> parentModule</span><span class="pun">:</span><span class="pln"> </span><span class="typ">GreetingModule</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">parentModule</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">throw</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Error</span><span class="pun">(</span><span class="pln">
      </span><span class="str">'GreetingModule is already loaded. Import it in the AppModule only'</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><hr><a id="q-entry-component-defined"></a><h2 id="what-is-an-entry-component" translation-result="on">什么是<em>入口组件</em>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-an-entry-component"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-is-an-entry-component">What is an <code>entry component</code>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-an-entry-component"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 根据组件类型<em>命令式</em>加载的组件是<em>入口组件</em>.</p><p translation-origin="off">An entry component is any component that Angular loads <em>imperatively</em> by type.</p><p translation-result="on">而通过组件选择器<em>声明式</em>加载的组件则<em>不是</em>入口组件。</p><p translation-origin="off">A component loaded <em>declaratively</em> via its selector is <em>not</em> an entry component.</p><p translation-result="on">Angular 会声明式的加载组件，它使用组件的选择器在模板中定位元素。 然后，Angular 会创建该组件的 HTML 表示，并把它插入 DOM 中所选元素的内部。它们不是入口组件。</p><p translation-origin="off">Angular loads a component declaratively when using the component's selector to locate the element in the template. Angular then creates the HTML representation of the component and inserts it into the DOM at the selected element. These aren't entry components.</p><p translation-result="on">而用于引导的根 <code>AppComponent</code> 则是一个<em>入口组件</em>。 虽然它的选择器匹配了 <code>index.html</code> 中的一个元素，但是 <code>index.html</code> 并不是组件模板，而且 <code>AppComponent</code> 选择器也不会在任何组件模板中出现。</p><p translation-origin="off">The bootstrapped root <code>AppComponent</code> is an <em>entry component</em>. True, its selector matches an element tag in <code>index.html</code>. But <code>index.html</code> isn't a component template and the <code>AppComponent</code> selector doesn't match an element in any component template.</p><p translation-result="on">在路由定义中用到的组件也同样是<em>入口组件</em>。 路由定义根据<em>类型</em>来引用组件。 路由器会忽略路由组件的选择器（即使它有选择器），并且把该组件动态加载到 <code><a href="api/router/RouterOutlet" class="code-anchor">RouterOutlet</a></code> 中。</p><p translation-origin="off">Components in route definitions are also <em>entry components</em>. A route definition refers to a component by its <em>type</em>. The router ignores a routed component's selector, if it even has one, and loads the component dynamically into a <code><a href="api/router/RouterOutlet" class="code-anchor">RouterOutlet</a></code>.</p><p translation-result="on">要了解更多，参见<a href="guide/entry-components">入口组件</a>一章。</p><p translation-origin="off">For more information, see <a href="guide/entry-components">Entry Components</a>.</p><hr><h2 id="whats-the-difference-between-a-bootstrap-component-and-an-entry-component" translation-result="on"><em>引导组件</em>和<em>入口组件</em>有什么不同？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#whats-the-difference-between-a-bootstrap-component-and-an-entry-component"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="whats-the-difference-between-a-bootstrap-component-and-an-entry-component">What's the difference between a <em>bootstrap</em> component and an <em>entry component</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#whats-the-difference-between-a-bootstrap-component-and-an-entry-component"><i class="material-icons">link</i></a></h2><p translation-result="on">引导组件是<a href="guide/ngmodule-faq#q-entry-component-defined">入口组件</a>的一种。 它是被 Angular 的引导（应用启动）过程加载到 DOM 中的入口组件。 其它入口组件则是被其它方式动态加载的，比如被路由器加载。</p><p translation-origin="off">A bootstrapped component <em>is</em> an <a href="guide/ngmodule-faq#q-entry-component-defined">entry component</a> that Angular loads into the DOM during the bootstrap process (application launch). Other entry components are loaded dynamically by other means, such as with the router.</p><p translation-result="on"><code>@<a href="api/core/NgModule#bootstrap" class="code-anchor">NgModule.bootstrap</a></code> 属性告诉编译器这是一个入口组件，同时它应该生成一些代码来用该组件引导此应用。</p><p translation-origin="off">The <code>@<a href="api/core/NgModule#bootstrap" class="code-anchor">NgModule.bootstrap</a></code> property tells the compiler that this is an entry component <em>and</em> it should generate code to bootstrap the application with this component.</p><p translation-result="on">不需要把组件同时列在 <code>bootstrap</code> 和 <code>entryComponent</code> 列表中 —— 虽然这样做也没坏处。</p><p translation-origin="off">There's no need to list a component in both the <code>bootstrap</code> and <code>entryComponents</code> lists, although doing so is harmless.</p><p translation-result="on">要了解更多，参见<a href="guide/entry-components">入口组件</a>一章。</p><p translation-origin="off">For more information, see <a href="guide/entry-components">Entry Components</a>.</p><hr><h2 id="when-do-i-add-components-to-entrycomponents" translation-result="on">什么时候我应该把组件加到 <code>entryComponents</code> 中？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#when-do-i-add-components-to-entrycomponents"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="when-do-i-add-components-to-entrycomponents">When do I add components to <em>entryComponents</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#when-do-i-add-components-to-entrycomponents"><i class="material-icons">link</i></a></h2><p translation-result="on">大多数应用开发者都不需要把组件添加到 <code>entryComponents</code> 中。</p><p translation-origin="off">Most application developers won't need to add components to the <code>entryComponents</code>.</p><p translation-result="on">Angular 会自动把恰当的组件添加到<em>入口组件</em>中。 列在 <code>@<a href="api/core/NgModule#bootstrap" class="code-anchor">NgModule.bootstrap</a></code> 中的组件会自动加入。 由路由配置引用到的组件会被自动加入。 用这两种机制添加的组件在入口组件中占了绝大多数。</p><p translation-origin="off">Angular adds certain components to <em>entry components</em> automatically. Components listed in <code>@<a href="api/core/NgModule#bootstrap" class="code-anchor">NgModule.bootstrap</a></code> are added automatically. Components referenced in router configuration are added automatically. These two mechanisms account for almost all entry components.</p><p translation-result="on">如果你的应用要用其它手段来<em>根据类型</em>引导或动态加载组件，那就得把它显式添加到 <code>entryComponents</code> 中。</p><p translation-origin="off">If your app happens to bootstrap or dynamically load a component <em>by type</em> in some other manner, you must add it to <code>entryComponents</code> explicitly.</p><p translation-result="on">虽然把组件加到这个列表中也没什么坏处，不过最好还是只添加真正的<em>入口组件</em>。 不要添加那些被其它组件的模板<a href="guide/ngmodule-faq#q-template-reference">引用过</a>的组件。</p><p translation-origin="off">Although it's harmless to add components to this list, it's best to add only the components that are truly <em>entry components</em>. Don't include components that <a href="guide/ngmodule-faq#q-template-reference">are referenced</a> in the templates of other components.</p><p translation-result="on">要了解更多，参见<a href="guide/entry-components">入口组件</a>一章。</p><p translation-origin="off">For more information, see <a href="guide/entry-components">Entry Components</a>.</p><hr><h2 id="why-does-angular-need-entrycomponents" translation-result="on">为什么 Angular 需要<em>入口组件</em>？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-does-angular-need-entrycomponents"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="why-does-angular-need-entrycomponents">Why does Angular need <em>entryComponents</em>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#why-does-angular-need-entrycomponents"><i class="material-icons">link</i></a></h2><p translation-result="on">原因在于<em>摇树优化</em>。对于产品化应用，你会希望加载尽可能小而快的代码。 代码中应该仅仅包括那些实际用到的类。 它应该排除那些从未用过的组件，无论该组件是否被声明过。</p><p translation-origin="off">The reason is <em>tree shaking</em>. For production apps you want to load the smallest, fastest code possible. The code should contain only the classes that you actually need. It should exclude a component that's never used, whether or not that component is declared.</p><p translation-result="on">事实上，大多数库中声明和导出的组件你都用不到。 如果你从未引用它们，那么<em>摇树优化器</em>就会从最终的代码包中把这些组件砍掉。</p><p translation-origin="off">In fact, many libraries declare and export components you'll never use. If you don't reference them, the tree shaker drops these components from the final code package.</p><p translation-result="on">如果<a href="guide/ngmodule-faq#q-angular-compiler">Angular 编译器</a>为每个声明的组件都生成了代码，那么摇树优化器的作用就没有了。</p><p translation-origin="off">If the <a href="guide/ngmodule-faq#q-angular-compiler">Angular compiler</a> generated code for every declared component, it would defeat the purpose of the tree shaker.</p><p translation-result="on">所以，编译器转而采用一种递归策略，它只为你用到的那些组件生成代码。</p><p translation-origin="off">Instead, the compiler adopts a recursive strategy that generates code only for the components you use.</p><p translation-result="on">编译器从入口组件开始工作，为它在入口组件的模板中<a href="guide/ngmodule-faq#q-template-reference">找到的</a>那些组件生成代码，然后又为在这些组件中的模板中发现的组件生成代码，以此类推。 当这个过程结束时，它就已经为每个入口组件以及从入口组件可以抵达的每个组件生成了代码。</p><p translation-origin="off">The compiler starts with the entry components, then it generates code for the declared components it <a href="guide/ngmodule-faq#q-template-reference">finds</a> in an entry component's template, then for the declared components it discovers in the templates of previously compiled components, and so on. At the end of the process, the compiler has generated code for every entry component and every component reachable from an entry component.</p><p translation-result="on">如果该组件不是<em>入口组件</em>或者没有在任何模板中发现过，编译器就会忽略它。</p><p translation-origin="off">If a component isn't an <em>entry component</em> or wasn't found in a template, the compiler omits it.</p><hr><h2 id="what-kinds-of-modules-should-i-have-and-how-should-i-use-them" translation-result="on">有哪些类型的模块？我应该如何使用它们？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-kinds-of-modules-should-i-have-and-how-should-i-use-them">What kinds of modules should I have and how should I use them?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them"><i class="material-icons">link</i></a></h2><p translation-result="on">每个应用都不一样。根据不同程度的经验，开发者会做出不同的选择。下列建议和指导原则广受欢迎。</p><p translation-origin="off">Every app is different. Developers have various levels of experience and comfort with the available choices. Some suggestions and guidelines appear to have wide appeal.</p><h3 id="sharedmodule"><code>SharedModule</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#sharedmodule"><i class="material-icons">link</i></a></h3><p translation-result="on">为那些可能会在应用中到处使用的组件、指令和管道创建 <code>SharedModule</code>。 这种模块应该只包含 <code>declarations</code>，并且应该导出几乎所有 <code>declarations</code> 里面的声明。</p><p translation-origin="off"><code>SharedModule</code> is a conventional name for an <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> with the components, directives, and pipes that you use everywhere in your app. This module should consist entirely of <code>declarations</code>, most of them exported.</p><p translation-result="on"><code>SharedModule</code> 可以重新导出其它小部件模块，比如 <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code>、<code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code> 和提供你广泛使用的 UI 控件的那些模块。</p><p translation-origin="off">The <code>SharedModule</code> may re-export other widget modules, such as <code><a href="api/common/CommonModule" class="code-anchor">CommonModule</a></code>, <code><a href="api/forms/FormsModule" class="code-anchor">FormsModule</a></code>, and NgModules with the UI controls that you use most widely.</p><p translation-result="on"><code>SharedModule</code><strong><em>不应该</em></strong>带有 <code>providers</code>，原因<a href="guide/ngmodule-faq#q-why-bad">在前面解释过了</a>。 它的导入或重新导出的模块中也不应该有 <code>providers</code>。 如果你要违背这条指导原则，请务必想清楚你在做什么，并要有充分的理由。</p><p translation-origin="off">The <code>SharedModule</code> should not have <code>providers</code> for reasons <a href="guide/ngmodule-faq#q-why-bad">explained previously</a>. Nor should any of its imported or re-exported modules have <code>providers</code>.</p><p translation-result="on">在任何特性模块中（无论是你在应用启动时主动加载的模块还是之后惰性加载的模块），你都可以随意导入这个 <code>SharedModule</code>。</p><p translation-origin="off">Import the <code>SharedModule</code> in your <em>feature</em> modules, both those loaded when the app starts and those you lazy load later.</p><h3 id="feature-modules" translation-result="on">特性模块<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#feature-modules"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="feature-modules">Feature Modules<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#feature-modules"><i class="material-icons">link</i></a></h3><p translation-result="on">特性模块是你围绕特定的应用业务领域创建的模块，比如用户工作流、小工具集等。它们包含指定的特性，并为你的应用提供支持，比如路由、服务、窗口部件等。 要对你的应用中可能会有哪些特性模块有个概念，考虑如果你要把与特定功能（比如搜索）有关的文件放进一个目录下，该目录的内容就可能是一个名叫 <code>SearchModule</code> 的特性模块。 它将会包含构成搜索功能的全部组件、路由和模板。</p><p translation-origin="off">Feature modules are modules you create around specific application business domains, user workflows, and utility collections. They support your app by containing a particular feature, such as routes, services, widgets, etc. To conceptualize what a feature module might be in your app, consider that if you would put the files related to a certain functionality, like a search, in one folder, that the contents of that folder would be a feature module that you might call your <code>SearchModule</code>. It would contain all of the components, routing, and templates that would make up the search functionality.</p><p translation-result="on">要了解更多，参见<a href="guide/feature-modules">特性模块</a>和<a href="guide/module-types">模块的分类</a>。</p><p translation-origin="off">For more information, see <a href="guide/feature-modules">Feature Modules</a> and <a href="guide/module-types">Module Types</a></p><h2 id="whats-the-difference-between-ngmodules-and-javascript-modules" translation-result="on">在 NgModule 和 JavaScript 模块之间有什么不同？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#whats-the-difference-between-ngmodules-and-javascript-modules"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="whats-the-difference-between-ngmodules-and-javascript-modules">What's the difference between NgModules and JavaScript Modules?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#whats-the-difference-between-ngmodules-and-javascript-modules"><i class="material-icons">link</i></a></h2><p translation-result="on">在 Angular 应用中，NgModule 会和 JavaScript 的模块一起工作。</p><p translation-origin="off">In an Angular app, NgModules and JavaScript modules work together.</p><p translation-result="on">在现代 JavaScript 中，每个文件都是模块（参见<a href="http://exploringjs.com/es6/ch_modules.html">模块</a>）。 在每个文件中，你要写一个 <code>export</code> 语句将模块的一部分公开。</p><p translation-origin="off">In modern JavaScript, every file is a module (see the <a href="http://exploringjs.com/es6/ch_modules.html">Modules</a> page of the Exploring ES6 website). Within each file you write an <code>export</code> statement to make parts of the module public.</p><p translation-result="on">Angular 模块是一个带有 <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 装饰器的类，而 JavaScript 模块则没有。 Angular 的 <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 有自己的 <code>imports</code> 和 <code>exports</code> 来达到类似的目的。</p><p translation-origin="off">An Angular NgModule is a class with the <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> decorator—JavaScript modules don't have to have the <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> decorator. Angular's <code><a href="api/core/NgModule" class="code-anchor">NgModule</a></code> has <code>imports</code> and <code>exports</code> and they serve a similar purpose.</p><p translation-result="on">你可以<em>导入</em>其它 NgModules，以便在当前模块的组件模板中使用它们导出的类。 你可以<em>导出</em>当前 NgModules 中的类，以便<em>其它</em> NgModules 可以导入它们，并用在自己的组件模板中。</p><p translation-origin="off">You <em>import</em> other NgModules so you can use their exported classes in component templates. You <em>export</em> this NgModule's classes so they can be imported and used by components of <em>other</em> NgModules.</p><p translation-result="on">要了解更多，参见 <a href="guide/ngmodule-vs-jsmodule">JavaScript 模块 vs. NgModules</a> 一章</p><p translation-origin="off">For more information, see <a href="guide/ngmodule-vs-jsmodule">JavaScript Modules vs. NgModules</a>.</p><hr><a id="q-template-reference"></a><h2 id="how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference" translation-result="on">Angular 如何查找模板中的组件、指令和管道？什么是 <strong><em>模板引用</em></strong> ？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference">How does Angular find components, directives, and pipes in a template?<br>What is a <i><b>template reference</b></i>?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference"><i class="material-icons">link</i></a></h2><p translation-result="on"><a href="guide/ngmodule-faq#q-angular-compiler">Angular 编译器</a>在组件模板内查找其它组件、指令和管道。一旦找到了，那就是一个“模板引用”。</p><p translation-origin="off">The <a href="guide/ngmodule-faq#q-angular-compiler">Angular compiler</a> looks inside component templates for other components, directives, and pipes. When it finds one, that's a template reference.</p><p translation-result="on">Angular 编译器通过在一个模板的 HTML 中匹配组件或指令的<strong>选择器（selector）</strong>，来查找组件或指令。</p><p translation-origin="off">The Angular compiler finds a component or directive in a template when it can match the <em>selector</em> of that component or directive to some HTML in that template.</p><p translation-result="on">编译器通过分析模板 HTML 中的管道语法中是否出现了特定的管道名来查找对应的管道。</p><p translation-origin="off">The compiler finds a pipe if the pipe's <em>name</em> appears within the pipe syntax of the template HTML.</p><p translation-result="on">Angular 只查询两种组件、指令或管道：1）那些在当前模块中声明过的，以及 2）那些被当前模块导入的模块所导出的。</p><p translation-origin="off">Angular only matches selectors and pipe names for classes that are declared by this module or exported by a module that this module imports.</p><hr><a id="q-angular-compiler"></a><h2 id="what-is-the-angular-compiler" translation-result="on">什么是 Angular 编译器？<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-the-angular-compiler"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="what-is-the-angular-compiler">What is the Angular compiler?<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/ngmodule-faq#what-is-the-angular-compiler"><i class="material-icons">link</i></a></h2><p translation-result="on"><em>Angular 编译器</em>会把你所编写的应用代码转换成高性能的 JavaScript 代码。 在编译过程中，<code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 的元数据扮演了很重要的角色。</p><p translation-origin="off">The Angular compiler converts the application code you write into highly performant JavaScript code. The <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> metadata plays an important role in guiding the compilation process.</p><p translation-result="on">你写的代码是无法直接执行的。 比如<strong>组件</strong>。 组件有一个模板，其中包含了自定义元素、属性型指令、Angular 绑定声明和一些显然不属于原生 HTML 的古怪语法。</p><p translation-origin="off">The code you write isn't immediately executable. For example, components have templates that contain custom elements, attribute directives, Angular binding declarations, and some peculiar syntax that clearly isn't native HTML.</p><p translation-result="on"><em>Angular 编译器</em>读取模板的 HTML，把它和相应的组件类代码组合在一起，并产出<em>组件工厂</em>。</p><p translation-origin="off">The Angular compiler reads the template markup, combines it with the corresponding component class code, and emits <em>component factories</em>.</p><p translation-result="on">组件工厂为组件创建纯粹的、100% JavaScript 的表示形式，它包含了 <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> 元数据中描述的一切：HTML、绑定指令、附属的样式等……</p><p translation-origin="off">A component factory creates a pure, 100% JavaScript representation of the component that incorporates everything described in its <code>@<a href="api/core/Component" class="code-anchor">Component</a></code> metadata: the HTML, the binding instructions, the attached styles.</p><p translation-result="on">由于<strong>指令</strong>和<strong>管道</strong>都出现在组件模板中，*Angular 编译器**也同样会把它们组合进编译后的组件代码中。</p><p translation-origin="off">Because directives and pipes appear in component templates, the Angular compiler incorporates them into compiled component code too.</p><p translation-result="on"><code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> 元数据告诉<em>Angular 编译器</em>要为当前模块编译哪些组件，以及如何把当前模块和其它模块链接起来。</p><p translation-origin="off"><code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a></code> metadata tells the Angular compiler what components to compile for this module and how to link this module with other modules.</p></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="NgModule FAQ"><a href="guide/ngmodule-faq#ngmodule-faq">NgModule FAQ</a></li><li class="h2 ng-star-inserted" title="我应该把哪些类加到 declarations 中？"><a href="guide/ngmodule-faq#what-classes-should-i-add-to-the-declarations-array">我应该把哪些类加到 <em>declarations</em> 中？</a></li><li class="h2 ng-star-inserted" title="什么是可声明的？"><a href="guide/ngmodule-faq#what-is-a-declarable">什么是<em>可声明的</em>？</a></li><li class="h2 ng-star-inserted" title="哪些类不应该加到 declarations 中？"><a href="guide/ngmodule-faq#what-classes-should-i-not-add-to-declarations">哪些类<em>不</em>应该加到 <code>declarations</code> 中？</a></li><li class="h2 ng-star-inserted" title="为什么要把同一个组件声明在不同的 NgModule 属性中？"><a href="guide/ngmodule-faq#why-list-the-same-component-in-multiple-ngmodule-properties">为什么要把同一个组件声明在不同的 <em>NgModule</em> 属性中？</a></li><li class="h2 ng-star-inserted" title="&quot;Can't bind to 'x' since it isn't a known property of 'y'&quot;是什么意思？"><a href="guide/ngmodule-faq#what-does-cant-bind-to-x-since-it-isnt-a-known-property-of-y-mean">"<em>Can't bind to 'x' since it isn't a known property of 'y'</em>"是什么意思？</a></li><li class="h2 ng-star-inserted" title="我应该导入什么？"><a href="guide/ngmodule-faq#what-should-i-import">我应该导入什么？</a></li><li class="h2 ng-star-inserted" title="我应该导入 BrowserModule 还是 CommonModule？"><a href="guide/ngmodule-faq#should-i-import-browsermodule-or-commonmodule">我应该导入 <em>BrowserModule</em> 还是 <em>CommonModule</em>？</a></li><li class="h2 ng-star-inserted" title="如果我两次导入同一个模块会怎么样？"><a href="guide/ngmodule-faq#what-if-i-import-the-same-module-twice">如果我两次导入同一个模块会怎么样？</a></li><li class="h2 ng-star-inserted" title="我应该导出什么？"><a href="guide/ngmodule-faq#what-should-i-export">我应该导出什么？</a></li><li class="h2 ng-star-inserted" title="我不应该导出什么？"><a href="guide/ngmodule-faq#what-should-i-not-export">我<em>不应该</em>导出什么？</a></li><li class="h2 ng-star-inserted" title="我可以重新导出类和模块吗？"><a href="guide/ngmodule-faq#can-i-re-export-classes-and-modules">我可以重新导出类和模块吗？</a></li><li class="h2 ng-star-inserted" title="forRoot()方法是什么？"><a href="guide/ngmodule-faq#what-is-the-forroot-method"><em>forRoot()</em>方法是什么？</a></li><li class="h2 ng-star-inserted" title="为什么服务提供者在特性模块中的任何地方都是可见的？"><a href="guide/ngmodule-faq#why-is-a-service-provided-in-a-feature-module-visible-everywhere">为什么服务提供者在特性模块中的任何地方都是可见的？</a></li><li class="h2 ng-star-inserted" title="为什么在惰性加载模块中声明的服务提供者只对该模块自身可见？"><a href="guide/ngmodule-faq#why-is-a-service-provided-in-a-lazy-loaded-module-visible-only-to-that-module">为什么在惰性加载模块中声明的服务提供者只对该模块自身可见？</a></li><li class="h2 ng-star-inserted" title="如果两个模块提供了同一个服务会怎么样？"><a href="guide/ngmodule-faq#what-if-two-modules-provide-the-same-service">如果两个模块提供了<em>同一个</em>服务会怎么样？</a></li><li class="h2 ng-star-inserted" title="我应该如何把服务的范围限制到模块中？"><a href="guide/ngmodule-faq#how-do-i-restrict-service-scope-to-a-module">我应该如何把服务的范围限制到模块中？</a></li><li class="h2 ng-star-inserted" title="我应该把全应用级提供者添加到根模块 AppModule 中还是根组件 AppComponent 中？"><a href="guide/ngmodule-faq#should-i-add-application-wide-providers-to-the-root-appmodule-or-the-root-appcomponent">我应该把全应用级提供者添加到根模块 <code>AppModule</code> 中还是根组件 <code>AppComponent</code> 中？</a></li><li class="h2 ng-star-inserted" title="我应该把其它提供者注册到模块中还是组件中？"><a href="guide/ngmodule-faq#should-i-add-other-providers-to-a-module-or-a-component">我应该把其它提供者注册到模块中还是组件中？</a></li><li class="h2 ng-star-inserted" title="为什么在共享模块中为惰性加载模块提供服务是个馊主意？"><a href="guide/ngmodule-faq#why-is-it-bad-if-a-shared-module-provides-a-service-to-a-lazy-loaded-module">为什么在共享模块中为惰性加载模块提供服务是个馊主意？</a></li><li class="h3 ng-star-inserted" title="急性加载的场景"><a href="guide/ngmodule-faq#the-eagerly-loaded-scenario">急性加载的场景</a></li><li class="h3 ng-star-inserted" title="惰性加载场景"><a href="guide/ngmodule-faq#the-lazy-loaded-scenario">惰性加载场景</a></li><li class="h2 ng-star-inserted" title="为什么惰性加载模块会创建一个子注入器？"><a href="guide/ngmodule-faq#why-does-lazy-loading-create-a-child-injector">为什么惰性加载模块会创建一个子注入器？</a></li><li class="h2 ng-star-inserted" title="我要如何知道一个模块或服务是否已经加载过了？"><a href="guide/ngmodule-faq#how-can-i-tell-if-an-ngmodule-or-service-was-previously-loaded">我要如何知道一个模块或服务是否已经加载过了？</a></li><li class="h2 ng-star-inserted" title="什么是入口组件？"><a href="guide/ngmodule-faq#what-is-an-entry-component">什么是<em>入口组件</em>？</a></li><li class="h2 ng-star-inserted" title="引导组件和入口组件有什么不同？"><a href="guide/ngmodule-faq#whats-the-difference-between-a-bootstrap-component-and-an-entry-component"><em>引导组件</em>和<em>入口组件</em>有什么不同？</a></li><li class="h2 ng-star-inserted" title="什么时候我应该把组件加到 entryComponents 中？"><a href="guide/ngmodule-faq#when-do-i-add-components-to-entrycomponents">什么时候我应该把组件加到 <code>entryComponents</code> 中？</a></li><li class="h2 ng-star-inserted" title="为什么 Angular 需要入口组件？"><a href="guide/ngmodule-faq#why-does-angular-need-entrycomponents">为什么 Angular 需要<em>入口组件</em>？</a></li><li class="h2 ng-star-inserted" title="有哪些类型的模块？我应该如何使用它们？"><a href="guide/ngmodule-faq#what-kinds-of-modules-should-i-have-and-how-should-i-use-them">有哪些类型的模块？我应该如何使用它们？</a></li><li class="h3 ng-star-inserted" title="SharedModule"><a href="guide/ngmodule-faq#sharedmodule"><code>SharedModule</code></a></li><li class="h3 ng-star-inserted" title="特性模块"><a href="guide/ngmodule-faq#feature-modules">特性模块</a></li><li class="h2 ng-star-inserted" title="在 NgModule 和 JavaScript 模块之间有什么不同？"><a href="guide/ngmodule-faq#whats-the-difference-between-ngmodules-and-javascript-modules">在 NgModule 和 JavaScript 模块之间有什么不同？</a></li><li class="h2 ng-star-inserted" title="Angular 如何查找模板中的组件、指令和管道？什么是 模板引用 ？"><a href="guide/ngmodule-faq#how-does-angular-find-components-directives-and-pipes-in-a-templatewhat-is-a-template-reference">Angular 如何查找模板中的组件、指令和管道？什么是 <strong><em>模板引用</em></strong> ？</a></li><li class="h2 ng-star-inserted" title="什么是 Angular 编译器？"><a href="guide/ngmodule-faq#what-is-the-angular-compiler">什么是 Angular 编译器？</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.109+sha.7a49faba.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.811b066977719df5af39.js" type="module"></script><script src="runtime-es5.811b066977719df5af39.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.4e9aa34b562bab1382ab.js" type="module"></script><script src="main-es5.4e9aa34b562bab1382ab.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>